<template>
  <div style="width:100%; height:100%; display: flex;flex-direction: column;align-items: stretch;justify-content: center;padding-left: 20px">
    <el-table
      stripe
      style="width: 100%;"
      :data="pageData"
      :row-class-name="tableRowClassName"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="100px"
        :formatter="dateFormat"
      />
      <el-table-column
        prop="net"
        label="单位净值"
        width="100px"
      />
      <el-table-column
        prop="ac"
        label="累计净值"
        width="100px"
      />
      <el-table-column
        prop="equityReturn"
        label="日增长率"
        width="100px"
      >
        <template v-slot:="scope">
          <span v-if="Number(scope.row.equityReturn)>0" style="color: red;">{{ scope.row.equityReturn }}%</span>
          <span v-else style="color: green;">{{ scope.row.equityReturn }}%</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <el-pagination
      small
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { queryDataACAndNetWorth } from '@/api/front/fund/fundDataContent'

export default {
  name: 'NAVTable',
  props: {

    codeNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 总数
      total: 0,
      // 当前页
      currentPage: 1,
      // 每页多少条
      pageSize: 10,
      // 表格数据
      tableData: [],
      showTable: false,
      dataNetWorthTrend: [],
      dataAcWorthTrend: []
    }
  },
  computed: {
    pageData() {
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  watch: {

  },
  mounted() {
    this.fitchData()
  },
  methods: {

    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
    },

    // 时间格式化
    dateFormat(row, column) {
      var date = Number(row[column.property])
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },

    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      // if (Number(row.equityReturn) > 0) {
      //   return 'error-row'
      // } else {
      //   return 'success-row'
      // }
    },

    // 获取表格数据
    fitchData() {
      queryDataACAndNetWorth(this.codeNumber).then(res => {
        console.log('queryDataACAndNetWorth', res)

        this.dataNetWorthTrend = res.dataNetWorthTrend
        this.dataAcWorthTrend = res.dataACWorthTrend.dataACWorthTrendList

        console.log('dataNetWorthTrend', this.dataNetWorthTrend)
        console.log('dataAcWorthTrend', this.dataAcWorthTrend)
        this.tableData = this.mergeNetAndAcData().reverse()

        // 分页组件初始化
        // 总数
        this.total = this.tableData.length
        // 当前页 默认第一页
        // this.currentPage = Math.ceil(this.tableData.length / this.pageSize)
      })
    },

    // 数据拼接
    mergeNetAndAcData() {
      const tableData = this.dataNetWorthTrend.map((item, index) => {
        return { date: item.x, net: item.y, ac: this.dataAcWorthTrend[index][1], equityReturn: item.equityReturn, unitMoney: item.unitMoney }
      })
      console.log('tableData', tableData)
      // this.dataNetWorthTrend.forEach((val, index) => {
      //   console.log(val)
      //   const newRow = val.push.apply(val, this.dataNetWorthTrend[index])
      //   res.push({ date: newRow[0], net: newRow[1], ac: newRow[3] })
      // })
      // console.log(res)

      return tableData
    },

    // DataNetWorthTrend.vue转换数据
    resolveResultNet(res) {
      return res.map((item) => {
        const now = new Date(Number(item.x))
        return [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
          Number(item.y)
        ]
      })
    },

    // DataACWorthTrend.vue.vue转换数据
    resolveResultAC(res) {
      return res.dataACWorthTrendList.map((item) => {
        const now = new Date(Number(item[0]))
        return [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
          Number(item[1])
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .error-row {
  background: #F56C6C;
}

::v-deep .el-table .success-row {
  background: #67C23A;
}
</style>
